<template>
	<view class="pageItem">
		<view class="bg_item"></view>
		<view class="main">
			<image class="m_bg" src="/static/img/service_bg.png"></image>
			<view class="m_con">
				<view class="m_title">{{$t('servic.call_title')}}</view>
				<view class="m_phone">{{tel}}</view>
				<view class="m_link"></view>
				<image class="qr_img" :src="realUrl(kf_img)"></image>
				<view class="m_tip">{{$t('servic.qr_tip')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel : '400-1999-111',
				kf_img : '/static/del/cs_qrcode.png',
			};
		},
		onLoad() {
			this.initData();
		},
		methods:{
			initData(){
				this.tel = this.vuex.appInfo.plat_phone;
				let kf_image = this.vuex.appInfo.kf_image || '';
				if(kf_image){
					this.kf_img = kf_image;
				}
				
			}
			
		}
	}
</script>

<style lang="scss">
.bg_item {
	@include bg_item(90vw);
}
.main{
	display: inline-block;
	position: relative;
	z-index: 2;
	width: 80%;
	margin-left: 10%;
	margin-top: 10vw;
	.m_bg{
		position: absolute;
		width: 100%;
		height: 110vw;
		z-index: 2;
		top: 0;
		left: 0;
	}
	.m_con{
		position: relative;
		z-index: 3;
		text-align: center;
		.m_title{
			width: 100%;
			margin-top: 8vw;
			font-size: 4vw;
			color: #999;
		}
		.m_phone{
			font-size: 5vw;
			color: #333;
			margin-top: 1vw;
		}
		.m_link{
			width: 80%;
			margin-left: 10%;
			padding-top: 7vw;
			border-bottom: 1rpx dotted #d6d6d6;
		}
		.qr_img{
			width: 48vw;
			height: 48vw;
			margin-top: 12vw;
		}
		.m_tip{
			margin-top: 4vw;
			font-size: 3.3vw;
			color: #999;
		}
	}
}
</style>
